<template>
  <div class="detail">
    <div class="main">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <nuxt-link to="/raider">旅游攻略</nuxt-link>
        <span>/</span>
        攻略详情
      </div>
      <h2>{{detailInfo.title}}</h2>
      <div class="info">
        <span>攻略：{{time}}</span>
        <span>阅读：{{detailInfo.watch}}</span>
      </div>
      <div class="content" v-html="detailInfo.content"></div>
      <div class="ctrl">
        <div class="item">
          <span class="iconfont icon-pinglun"></span>
          <p>评论</p>
        </div>
        <div class="item">
          <span class="iconfont icon-fenxiang"></span>
          <p>分享</p>
        </div>
      </div>
      <!-- 评论 -->
      <comment />
    </div>
    <!-- 侧边栏推荐 -->
    <recommend />
  </div>
</template>

<script>
import recommend from "@/components/raider/recommend";
import comment from "@/components/raider/comment";
import moment from "moment";
export default {
  components: {
    recommend,
    comment,
  },
  data() {
    return {
      detailInfo: {}, //攻略详情
      title: "",
    };
  },
  //可以进行seo优化，这只做title变化
  head() {
    return {
      title: this.title,
    };
  },
  //时间戳转换
  computed: {
    time() {
      return moment(this.detailInfo.created_at).format("YYYY-MM-DD HH:mm");
    },
  },
  // 侧边栏跳转修改路由，监听路由重新获取详情
  watch: {
    $route: {
      handler() {
        this.getDetail();
      },
      immediate: true,
    },
    detailInfo() {
      this.title = this.detailInfo.title;
    },
  },
  methods: {
    //获取攻略详情
    getDetail() {
      this.$axios({
        url: "/posts/" + this.$route.query.id,
      }).then((res) => {
        this.detailInfo = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  width: 1000px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .main {
    width: 700px;
    .breadcrumb {
      a {
        font-weight: 700;
        &:hover {
          color: #409eff;
        }
      }
      font-size: 14px;
      color: #666;
    }
    h2 {
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }
    .info {
      text-align: right;
      color: #999;
      padding: 10px;
    }
    /deep/.content {
      p {
        margin: 10px 0;
      }
      img {
        max-width: 700px;
        display: block;
        margin-bottom: 5px;
      }
    }
    .ctrl {
      display: flex;
      justify-content: center;
      text-align: center;
      padding: 50px 0 30px;
      .item {
        margin: 0 20px;
        cursor: pointer;
        span {
          font-size: 28px;
          color: #ffa500;
        }
        p {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
</style>